define(['esri/layers/GraphicsLayer'], function (GraphicsLayer) {
    var CanvasLayer = GraphicsLayer.createSubclass({
        declaredClass: 'CanvasLayer',
        /*创建Canvaslayer的容器canvas，添加到map的layers下面*/
        createCanvas: function () {
            let canvas = document.createElement('canvas');
            canvas.width = this.view.width;
            canvas.height = this.view.height;
            canvas.setAttribute('id', 'heatmap');
            canvas.style.position = 'absolute';
            canvas.style.top = 0;
            canvas.style.left = 0;
            if (!this.view) {
                console.log('缺少view!');
            }
            let parent = this.view.canvas.parentElement;
            parent.appendChild(canvas);
            this.canvas = canvas;
            this.context = canvas.getContext('2d');
        },

        /*修改色带的透明度，给图例用的色带不用加透明度*/
        modifyGradient: function (gradient) {
            this.legendGradient = gradient;
            for (var i in gradient) {
                var item = gradient[i].toLowerCase();
                if (item.includes('rgba')) {
                    item = item.slice(5, -1).split(',');
                    item.pop();
                    item = 'rgb(' + item.join(',') + ')';
                    this.legendGradient[i] = item;
                }
            }
        },
        /*图例*/
        getLegend: function (mapView, options = { style: {} }) {
            this.modifyGradient({ ...this.gradient });
            var gradient = this.legendGradient || this.gradient;
            var canvasHeight = parseInt(options.canvasHeight) || 120;
            var canvasWidth = parseInt(options.canvasWidth) || 20;

            this._legendElement = document.createElement('div');
            this._legendElement.style = { ...this._legendElement.style, ...options.style };
            this._legendElement.classList.add('layerLegend');
            mapView.getElement().append(this._legendElement);

            var titleElement = document.createElement('div');
            titleElement.style.textAlign = 'center';
            titleElement.style.fontSize = '16px';
            titleElement.style.fontWeight = 'bold';
            this._legendElement.append(titleElement);
            titleElement.innerHTML = `<div style="padding-bottom:5px;">图&nbsp&nbsp例</div>`;

            var contentElement = document.createElement('div');
            contentElement.style.position = 'relative';
            this._legendElement.append(contentElement);
            contentElement.innerHTML = `<div style="position:absolute;top: -2px;right: 0px;">最大值</div>
                                      <div style="position:absolute;top: ${
                                          canvasHeight - 16
                                      }px;right: 0px;">最小值</div>
                                     `;

            var _contentWidth = mapView.jQuery(contentElement).width() || 42;
            var canvas = document.createElement('canvas');
            canvas.style.width = canvasWidth + _contentWidth + 'px';
            canvas.style.height = canvasHeight + 'px';
            contentElement.append(canvas);

            var paletteCtx = canvas.getContext('2d');

            var lineGradient = paletteCtx.createLinearGradient(0, canvasHeight, 0, 0);

            for (var key in gradient) {
                lineGradient.addColorStop(parseFloat(key), gradient[key]);
            }

            paletteCtx.fillStyle = lineGradient;
            //todo
            paletteCtx.fillRect(0, 0, canvasWidth * 5, canvasHeight * 2);

            return canvas;
        },
        /*添加监听*/
        startMapEventListeners: function () {
            var me = this;
            let view = this.view;
            this._extentChangeHandle = view.watch('extent', function () {
                if (!me.visible) {
                    return;
                }
                me.freshenLayer();
            });
            // view.watch("camera",  function () {
            //     if (!me.visible) {
            //         return;
            //     }
            //     me.freshenLayer();
            //
            // });
        },
        removeHandle: function () {
            if (this._extentChangeHandle) {
                this._extentChangeHandle.remove();
                this._extentChangeHandle = null;
            }
        },
        removeLayer: function () {
            this.removeHandle();
            if (this.canvas) {
                this.canvas.parentNode.removeChild(this.canvas);
            }

            if (this._legendElement) {
                this._legendElement.parentNode.removeChild(this._legendElement);
                this._legendElement = null;
            }
        },
        hideLayer: function () {
            this.visible = false;
            this.canvas.style.display = 'none';
        },
        showLayer: function () {
            this.visible = true;
            this.canvas.style.display = 'block';
        },
        /*刷新layer*/
        freshenLayer: function () {
            this.clearCanvas();
            this.addPoint(this.data);
        },
        /*清除渲染效果*/
        clearCanvas: function () {
            this.context.clearRect(0, 0, this.view.width, this.view.height);
        },
    });
    return CanvasLayer;
});
